<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><%= web_title%></title>
    <link rel="stylesheet" href="/layuiadmin/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="/layuiadmin/style/admin.css" media="all">
    <link rel="stylesheet" href="/ruoling/css/ruoling-ui.css">
    <link rel="stylesheet" href="/ruoling/css/ruoling-load.css">
    <link rel="stylesheet" href="/libs/animate/animate.css">
</head>
<style>
    /* chrome */
    input::-webkit-outer-spin-button,
    input::-webkit-inner-spin-button {
        -webkit-appearance: none;
    }
    /* 火狐浏览器 */
    input[type="number"] {
        -moz-appearance: textfield;
    }
    .Yiling-flexd{position: fixed;bottom: 0;background-color: #f0f4f7;width: 100%;border-top: 1px #c7c7c7 solid;text-align: right;}
    .Yiling-padding{padding: 20px 15px;}
    .Yiling-border-blue{border: 1px solid #0064b6;}
    .Yiling-border-block{border: 1px solid #000;}
    .Yiling-Body{background-color: #ffffff;}
    .Yiling-padding-bottom{padding-bottom: 15px;}
    .Yiling-seach{display: inline-block;height: 36px;border: 1px solid #e5e6e7;vertical-align: top;line-height: 36px;width: 36px;text-align: center;margin-left: -6px;border-top-right-radius: 5px;border-bottom-right-radius: 5px;cursor: pointer;}
</style>
<body class="Yiling-Body">
<form class="layui-form" action="">
    <div style="padding:20px 20px;">
        <div class="Yiling-padding-bottom">
            <label class="layui-form-label" style="width: 190px;">上级菜单：</label>
            <div style="width: 300px;display: inline-block;">
                <input type="text"  name="sys_parent_id" value="<%= sys_parent_data.sys_menu_name%>" data-id="<%= sys_parent_data.ID%>"  id="Pidtitle" style="background-color: #f8f8f8;" required  lay-verify="required"  placeholder="请输入主目录" autocomplete="off" class="layui-input">
            </div>
            <div class="Yiling-seach">
                <i class="layui-icon layui-icon-search"></i>
            </div>
        </div>
        <div class="Yiling-padding-bottom">
            <label class="layui-form-label" style="width: 190px;">菜单类型：</label>
            <div style="width: 300px;display: inline-block;" id="InputRadio">
                <%if(data.sys_menu_type == "M"){%>
                    <input type="radio"  name="sys_menu_type"  lay-filter="levelM" value="M" title="目录" checked>
                <%}else{%>
                    <input type="radio"  name="sys_menu_type"  lay-filter="levelM" value="M" title="目录" >
                <%}%>
                <%if(data.sys_menu_type == "C"){%>
                    <input type="radio" name="sys_menu_type"  lay-filter="levelM" value="C" title="菜单" checked>
                <%}else{%>
                    <input type="radio" name="sys_menu_type"  lay-filter="levelM" value="C" title="菜单" >
                <%}%>
                <%if(data.sys_menu_type == "A"){%>
                    <input type="radio" name="sys_menu_type"  lay-filter="levelM" value="A" title="按钮" checked>
                <%}else{%>
                    <input type="radio" name="sys_menu_type"  lay-filter="levelM" value="A" title="按钮">
                <%}%>
            </div>
        </div>
        <input type="hidden" name="ID" value="<%= data.ID%>" />
        <div id="CatalogueMian">
            <div class="Yiling-padding-bottom">
                <label class="layui-form-label" style="width: 190px;">菜单名称：</label>
                <div style="width: 300px;display: inline-block;">
                    <input type="text" name="sys_menu_name" value="<%= data.sys_menu_name%>"  required  lay-verify="required" placeholder="请输入菜单名称" autocomplete="off" class="layui-input">
                </div>
            </div>
            <%if(data.sys_menu_type == "M"){%>
                <div class="Yiling-padding-bottom" id="permisshref" style="display:none">
                    <label class="layui-form-label" style="width: 190px;">请求地址：</label><div style="width: 300px;display: inline-block;"><input type="text" name="sys_permission_url" value="<%= data.sys_permission_url%>"  required  lay-verify="required" placeholder="请输入请求地址" autocomplete="off" class="layui-input"></div>
                </div>
            <%}else{%>
                <div class="Yiling-padding-bottom" id="permisshref" >
                    <label class="layui-form-label" style="width: 190px;">请求地址：</label><div style="width: 300px;display: inline-block;"><input type="text" name="sys_permission_url" value="<%= data.sys_permission_url%>"  required  lay-verify="required" placeholder="请输入请求地址" autocomplete="off" class="layui-input"></div>
                </div>
            <%}%>
            <%if(data.sys_menu_type == "A"){%>
                <div class="Yiling-padding-bottom" id="menuicon" style="display:none">
                    <label class="layui-form-label" style="width: 190px;">图标：</label>
                    <div style="width: 300px;display: inline-block;">
                        <input type="text" name="sys_menu_icon" value="<%= data.sys_menu_icon%>"  id="iconInput" placeholder="请添加图标" autocomplete="off" class="layui-input">
                        <iframe id="MenuIframe" class="animated flipInX" style="display:none" src="/admin/system/menu/icon/view" width="100%" height="100%" frameborder="0"></iframe>
                    </div>
                </div>
            <%}else{%>
                <div class="Yiling-padding-bottom" id="menuicon">
                    <label class="layui-form-label" style="width: 190px;">图标：</label>
                    <div style="width: 300px;display: inline-block;">
                        <input type="text" name="sys_menu_icon" value="<%= data.sys_menu_icon%>"  id="iconInput" placeholder="请添加图标" autocomplete="off" class="layui-input">
                        <iframe id="MenuIframe" class="animated flipInX" style="display:none" src="/admin/system/menu/icon/view" width="100%" height="100%" frameborder="0"></iframe>
                    </div>
                </div>
            <%}%>
            <div class="Yiling-padding-bottom">
                <label class="layui-form-label" style="width: 190px;">显示排序：</label>
                <div style="width: 300px;display: inline-block;">
                    <input type="number" name="sys_order_num" onmousewheel="return false;" value="<%= data.sys_order_num%>"  required  lay-verify="required" placeholder="请输入显示排序" autocomplete="off" class="layui-input">
                </div>
            </div>
        </div>
    </div>
    <div class="Yiling-flexd">
        <div class="Yiling-padding">
            <button type="button"  lay-submit lay-filter="formDemo"  class="layui-btn layui-btn-sm Yliing-blue Yiling-border-blue">确认</button>
            <button type="button" id="Yiling-close" class="layui-btn layui-btn-sm layui-btn-primary  Yiling-border-block">关闭</button>
        </div>
    </div>
</form>
</body>
</html>
<script src="/layuiadmin/layui/layui.js"></script>
<script>
    layui.config({
        base:""
    }).extend({
        Yiling:"/libs/ruoling-request/js/Yiling-Request"
    }).use(["table","layer","jquery","form",'Yiling'],function(){
        let table = layui.table;
        let layer = layui.layer;
        let $ = layui.jquery;
        let form = layui.form;
        let request = layui.Yiling.YI_Ajax;

        //填充input框
        window.Loadinput = function (data) {
            let Pidtitle = document.querySelector("#Pidtitle");
            Pidtitle.value = data.title;
            Pidtitle.setAttribute("data-id",data.id)
        };

        //调用方法
        window.LoadTable = function (){

        };

        form.on("radio(levelM)",function(obj){
            let dataValue = obj.value;

            let permisshref = document.querySelector("#permisshref");
            let menuicon = document.querySelector("#menuicon");

            let thtml = "";
            //根据判断隐藏dom
            if(dataValue == "M"){

                permisshref.style.display = "none";
                menuicon.style.display = "block";

                thtml = "";

                permisshref.innerHTML = thtml;
            }else if(dataValue == "C"){

                permisshref.style.display = "block";
                menuicon.style.display = "block";

                thtml = "";

                thtml += '<label class="layui-form-label" style="width: 190px;">请求地址：</label><div style="width: 300px;display: inline-block;"><input type="text" name="sys_permission_url" value="<%= data.sys_permission_url%>"  required  lay-verify="required" placeholder="请输入请求地址" autocomplete="off" class="layui-input"></div>';

                permisshref.innerHTML = thtml;

            }else if(dataValue == "A"){

                permisshref.style.display = "block";
                menuicon.style.display = "none";
                thtml = "";
                thtml += '<label class="layui-form-label" style="width: 190px;">请求地址：</label><div style="width: 300px;display: inline-block;"><input type="text" name="sys_permission_url" value="<%= data.sys_permission_url%>"   required  lay-verify="required" placeholder="请输入请求地址" autocomplete="off" class="layui-input"></div>';
                permisshref.innerHTML = thtml;

            }
        });

        let iconInput = document.querySelector("#iconInput");
        let MenuIframe = document.getElementById("MenuIframe");
        let menuicon = document.getElementById("menuicon")

        iconInput.addEventListener("focus", function () {

            MenuIframe.style.display = "block";
        });

        document.addEventListener("click", function (e) {

            if (menuicon.contains(e.target) && "iconInput" != e.target.id) {
                MenuIframe.style.display = "none";
            }
        })
        window.IconOn = function (value) {
            let iconInput = document.querySelector("#iconInput");
            iconInput.value = value;
            MenuIframe.style.display = "none";

        }

        //监听提交
        form.on('submit(formDemo)', function(data){
            let info = data.field;
            let Pidtitle = document.querySelector("#Pidtitle");
            info.sys_parent_id = Pidtitle.getAttribute("data-id")

            layer.confirm('是否确认修改', {icon: 3, title:'提示'}, function(index){
                let obj = {
                    ID:info.ID,
                    sys_menu_name:info.sys_menu_name,
                    sys_parent_id:info.sys_parent_id,
                    sys_menu_type:info.sys_menu_type,
                    sys_permission_url:info.sys_permission_url,
                    sys_order_num:info.sys_order_num,
                    sys_menu_icon:info.sys_menu_icon,
                }
                new request().SetUrl("/admin/v1/api/system/menu/edit").SetType("POST").SetDataPara(obj).Alone().Init(function(result){
                    parent.window.LoadTable();
                    ifaremClose();
                });
                layer.close(index);
            });
            return false;
        });

        // 关闭按钮事件
        let Yiling_close = document.querySelector("#Yiling-close");
        Yiling_close.addEventListener("click",function(){
            ifaremClose();
        });

        function ifaremClose(){
            //获取特定iframe层的索引
            let index = parent.layer.getFrameIndex(window.name);
            parent.layer.close(index);
        };

        let TreeIndex = null;
        $("#Pidtitle").click(function(){

            TreeIndex = parent.layer.open({
                type:2,
                content:"/admin/system/menu/tree/view",
                title:"菜单树选择",
                maxmin:true,
                area:["400px","700px"],
                success:function(){

                }
            })
        })

    })
</script>

<!-- 时间格式化 -->
<script type="text/html" id="SetDateCrete">
    {{FormDate(d.creationtime,"yyyy年MM月dd日 HH:mm:ss")}}
</script>
<script>
    function FormDate(d,str){
        return layui.util.toDateString(d, str)
    }
</script>